<template>
  <div>
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide class="swiper-no-swiping">
        <div class="page-1 slide-bg">
          <div class="tw-bg" :class="{show: tw.show}"></div>
          <img class="top-flower" :class="{show: index.flowerShow}" src="/static/img/top-flower.png" width="84%" />
          
          <div class="center">
            <img class="logo" :class="{show: index.logoShow}" src="/static/img/logo.png" />
            <img class="title" :class="{show: index.titleShow}" src="/static/img/index-title.png" />
          </div>

          <div class="title-group">
            <img class="tit" :class="{show: activeIndex === 2}" src="/static/img/title1.png" />
            <img class="tit" :class="{show: activeIndex === 3 || activeIndex === 4}" src="/static/img/title2.png" />
            <img class="tit" :class="{show: activeIndex === 5 || activeIndex === 6 || index.endPillar}" src="/static/img/title3.png" />            
          </div>

          <div class="pillar-group"
            @click="stretchPillar"
            :class="{show: index.pillarShow, small: index.pillarSmall, smallStretch: index.pillarSmallStretch, bigStretch: index.pillarBigStretch, startSwiper, alignRight: activeIndex % 2 === 0 || index.endPillar, folded: index.pillarFolded, forceLeft: index.pillarForceLeft}">
            <img class="pillar-left" src="/static/img/left-pillar.png" />
            <div class="center-canvas"></div>
            <div class="content">
              <!-- 数据项 -->
              <img class="data" :class="{show: index.dataShow}" src="/static/img/static.png" />
              <!-- 图文1 -->
              <div class="tw-group">
                <img class="tw" :class="{show: activeIndex === 2}" src="/static/img/news1.jpg" />
                <img class="tw" :class="{show: activeIndex === 3}" src="/static/img/news2.jpg" />
                <img class="tw" :class="{show: activeIndex === 4}" src="/static/img/news2-2.jpg" />            
                <img class="tw" :class="{show: activeIndex >= 5}" src="/static/img/news3.jpg" />            
                <img class="tw" :class="{show: activeIndex === 6 || index.endPillar}" src="/static/img/news3-2.jpg" />                   
              </div>
            </div>
            <img class="pillar-right" src="/static/img/right-pillar.png" />
          </div>

          <img class="click-guide" v-show="index.guideShow" src="/static/img/click-guide.png" @click="stretchPillar" />

          <img class="bottom-flower" :class="{show: index.flowerShow}" src="/static/img/bottom-flower.png" width="60%" />

          <!-- 侧边花朵 -->
          <img class="left-side-flower" :class="{show: tw.show && activeIndex % 2 !== 0 && canSideAnimation}" src="/static/img/side-flower.png" /> 
          <img class="right-side-flower" :class="{show: (tw.show && activeIndex % 2 === 0 && canSideAnimation) || index.endPillar}" src="/static/img/side-flower.png" />
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-no-swiping">
        <div class="slide-bg" style="background-image: url(/static/img/page-1.png); background-position: bottom center">
          <img class="award-box" :class="{show: activeIndex === 7}" src="/static/img/award-box.png" />
          <img class="award-icon-left" src="/static/img/award-box-2.png" />
          <img class="award-icon-right" src="/static/img/award-box-2.png" />
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-no-swiping">
        <div class="page-3 slide-bg" style="background-image: url(/static/img/page-1.png)">
          <img class="top-flower" :class="{show: end.flowerShow}" src="/static/img/top-flower.png" width="84%" />        
          <img class="end-circle-1"  :class="{show: end.flowerShow, animation: end.circleAnimation}" src="/static/img/2018-circle.png" />
          <img class="end-circle-2"  :class="{show: end.flowerShow, animation: end.circleAnimation}" src="/static/img/2018-circle.png" />
          <img class="end-text" :class="{show: end.textShow}" src="/static/img/2018-text.png" />
          <img class="reload-btn" :class="{show: end.textShow}" @click="reload" src="/static/img/flower-btn.png" />
        </div>
      </swiper-slide>
      <!--<swiper-slide>
        <div class="slide-bg" style="background-image: url(/static/img/article-3.png)"></div>
      </swiper-slide>
      <swiper-slide>
        <div class="slide-bg" style="background-image: url(/static/img/article-4.png)"></div>
      </swiper-slide>
      <swiper-slide>
        <div class="slide-bg" style="background-image: url(/static/img/article-5.png)"></div>
      </swiper-slide>
      <swiper-slide>
        <div class="slide-bg" style="background-image: url(/static/img/award-1.png)"></div>
      </swiper-slide>
      <swiper-slide>
        <div class="slide-bg" style="background-image: url(/static/img/award-2.png)"></div>
      </swiper-slide> -->
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
      <!-- <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div> -->
      <div class="swiper-scrollbar"   slot="scrollbar"></div>
    </swiper>

    <img class="left-flower" v-if="!isIndex" src="/static/img/flower-left.png" @click="handleReturnClick" />
    <img class="right-flower"  v-if="!isIndex && this.activeIndex !== 8" src="/static/img/flower-right.png" @click="handleClick" />
  </div>
</template>

<script>
  import initLeaves from '../assets/js/leaves'
  export default {
    name: 'carrousel',
    data() {
      return {
        isIndex: true,
        index: {
          flowerShow: false,
          logoShow: false,
          titleShow: false,
          pillarSmall: true,
          pillarSmallStretch: false,
          pillarBigStretch: false,
          pillarShow: false,
          pillarFolded: false,
          pillarForceLeft: false,
          endPillar: false,
          guideShow: false,
          dataShow: false,
        },
        tw: {
          show: false,
        },
        end: {
          flowerShow: false,
          circleAnimation: false,
          textShow: false,
        },
        canSideAnimation: false,
        activeIndex: 1,
        locked: false,
        startSwiper: false,
        swiperOption: {
          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          // ...
          direction : 'vertical',
          // on: {
          //   slideChangeTransitionStart() {
          //     _this.activeIndex = this.activeIndex
          //     console.log(this.activeIndex)
          //   }
          // }
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    methods: {
      reload() { location.reload() },
      handleReturnClick() {
        console.log(this.locked)
        if (!this.locked) {
          this.locked = true;
          setTimeout(() => {
            this.locked = false
          }, 2000)
          console.log(this.activeIndex)
          if (this.activeIndex === 7) {
            this.swiper.slideTo(0, 1000)          
          }
          else if (this.activeIndex === 8) {
            this.swiper.slideTo(1, 1000)          
          }
          if (this.activeIndex > 1) this.activeIndex -= 1
          if (this.activeIndex === 1 && this.tw.show) {
            console.log(this.index.dataShow)
            this.index.dataShow = true
            this.index.flowerShow = true          
            this.tw.show = false          
            return     
          }
          if (this.activeIndex === 1 && !this.index.logoShow) {
            this.unStretchPillar()
            return
          }
          if (this.activeIndex === 2 || this.activeIndex === 4) {
            this.index.pillarFolded = true;
            setTimeout(() => {
              this.index.pillarFolded = false 
            }, 1000)
          }
        }
      },
      handleClick() {
        console.log(this.locked)
        console.log(this.activeIndex, this.index.logoShow)
        if (this.activeIndex === 1 && this.index.logoShow) {
          this.stretchPillar()
          return
        }
        if (!this.locked && this.startSwiper) {
          this.locked = true
          this.transform()
        }
      },
      pillarAnimation() {
        setTimeout(() => {
          this.activeIndex += 1
          setTimeout(() => {
            this.canSideAnimation = true
            this.locked = false          
          }, 1000)
        }, 600)
      },
      transform() {
        if (this.activeIndex === 1) {
          this.index.flowerShow = false
          setTimeout(() => {
            this.activeIndex += 1
            this.index.dataShow = false        
            this.tw.show = true         
            
            setTimeout(() => {
              this.canSideAnimation = true
              this.locked = false          
            }, 1000)
          }, 600)
        }
        else if (this.activeIndex >= 2 && this.activeIndex < 6) {
          if (this.activeIndex === 2 || this.activeIndex === 4) {
            this.index.pillarFolded = true              
            setTimeout(() => {
               this.activeIndex += 1
               setTimeout(() => {
                 this.canSideAnimation = true
                 this.locked = false          
               }, 1000)
            }, 500)
            setTimeout(() => {
              this.index.pillarFolded = false              
            }, 1000)
            return
          }
          this.pillarAnimation()
        }
        // else if (this.activeIndex === 6) {
        //   this.swiper.slideTo(1, 1000)
        //   this.activeIndex += 1
        //     setTimeout(() => {
        //       this.locked = false          
        //     }, 1000)
        // }
        else if (this.activeIndex === 6) {
          this.swiper.slideTo(1, 1000)
          setTimeout(() => {
            this.activeIndex += 1
            this.locked = false
            this.endPillar = true          
          }, 1000)
        } else if (this.activeIndex === 7) {
          this.swiper.slideTo(2, 1000)
          setTimeout(() => {
            this.activeIndex += 1
            this.end.flowerShow = true
            setTimeout(() => {
              this.end.circleAnimation = true
              this.end.textShow = true
            }, 2000)
          }, 1000)            
        }
      },
      stretchPillar() {
        if (!this.index.pillarSmallStretch) {
          this.isIndex = false
          this.index.pillarSmallStretch = true

          setTimeout(() => {
            this.index.logoShow = false
            this.index.titleShow = false
            this.index.guideShow = false
          }, 200)

          setTimeout(() => {
            this.index.pillarBigStretch = true
            this.index.guideShow = false            
          }, 700)

          setTimeout(() => {
            this.index.dataShow = true
            this.startSwiper = true
          }, 1500)
        }
      },
      unStretchPillar() {
        this.isIndex = true
        setTimeout(() => {
          this.index.pillarSmallStretch = false          
        }, 1800)
          setTimeout(() => {
            this.index.logoShow = true
            this.index.titleShow = true
            this.index.guideShow = true
          }, 1300)

          setTimeout(() => {
            this.index.pillarBigStretch = false
            this.index.guideShow = true            
          }, 800)

          setTimeout(() => {
            this.index.dataShow = false
            this.startSwiper = false
          }, 0)
      },
    },
    mounted() {
      window._this = this
      // this.activeIndex = 8
      // this.swiper.slideTo(2)
      initLeaves()
      setTimeout(() => {
        this.index.flowerShow = true
      }, 300)

      setTimeout(() => {
        this.index.logoShow = true
      }, 1000)

      setTimeout(() => {
        this.index.titleShow = true
      }, 1400)

      setTimeout(() => {
        this.index.pillarShow = true
      }, 2000)

      setTimeout(() => {
        this.index.guideShow = true
      }, 3000)
    }
  }
</script>